<template>
  <div class="bg-white py-24 sm:py-32">
    <div class="mx-auto max-w-7xl px-6 lg:px-8">
      <div class="mx-auto max-w-2xl lg:mx-0">
        <h2 class="text-3xl font-bold tracking-tight text-gray-900 sm:text-4xl">
          News Advisory
        </h2>
        <p class="mt-2 text-lg leading-8 text-gray-600">
          Learn about the latest car buying advice
        </p>
      </div>
      <div
        class="mx-auto mt-10 grid max-w-2xl grid-cols-1 gap-x-8 gap-y-16 border-t border-gray-200 pt-10 sm:mt-16 sm:pt-16 lg:mx-0 lg:max-w-none lg:grid-cols-3"
      >
        <article
          class="flex max-w-xl flex-col items-start justify-between"
          v-for="item in tableList"
          :key="item.noticeId"
        >
          <div class="flex items-center gap-x-4 text-xs">
            <time datetime="2020-03-16" class="text-gray-500">{{
              parseTime(item.createTime)
            }}</time>
            <a
              href="#"
              class="relative z-10 rounded-full bg-gray-50 px-3 py-1.5 font-medium text-gray-600 hover:bg-gray-100"
              >Marketing</a
            >
          </div>
          <div class="group relative">
            <h3
              class="mt-3 text-lg font-semibold leading-6 text-gray-900 group-hover:text-gray-600"
            >
              <div class="cursor-pointer" @click="goDetail(item)">
                <span class="absolute inset-0" />
                {{ item.noticeTitle }}
              </div>
            </h3>
            <p
              class="mt-5 line-clamp-3 text-sm leading-6 text-gray-600"
              v-html="item.noticeContent"
            />
          </div>
          <div class="relative mt-8 flex items-center gap-x-4">
            <avatar>{{ item.createBy.slice(0, 1) }}</avatar>
            <div class="text-sm leading-6">
              <p class="font-semibold text-gray-900">
                <span>
                  <span class="absolute inset-0" />
                  {{ item.createBy }}
                </span>
              </p>
              <p class="text-gray-600">{{ parseTime(item.createTime) }}</p>
            </div>
          </div>
        </article>
      </div>
    </div>
    <More :isStop="isStop" @getList="getList" />
  </div>
</template>

<script setup lang="ts">
import avatar from "@/components/avatar/index.vue";
import { getNewsList } from "@/api/news";
import { NewItem } from "@/api/news/news";
import More from "@/components/More/index.vue";
import { parseTime } from "@/utils/utils";
import { ref } from "vue";
import { useRouter } from "vue-router";
import { useNoticeStore } from "@/store/modules/notice";
// 获取列表
const query = {
  pageNum: 1,
  pageSize: 10
};
const total = ref(0);
const isStop = ref(false);
const tableList = ref<NewItem[]>([]);
const getList = async () => {
  const res = await getNewsList(query);
  if (res.code === 200) {
    tableList.value = res.rows;
    total.value = res.total;
    isStop.value = res.rows.length < query.pageSize;
  }
};
const router = useRouter();
const noticeStore = useNoticeStore();
const goDetail = (item: NewItem) => {
  noticeStore.setNoticeItem(item);
  router.push({
    name: "newsDetail",
    query: {
      id: item.noticeId
    }
  });
};
</script>
